<!--  -->
<template>
  <el-card class="top-card">
    <el-descriptions title="部件信息" size="medium">
      <el-descriptions-item label="名称">{{
        plcmsg.Name
      }}</el-descriptions-item>

      <el-descriptions-item label="通讯类型"
        >{{ getCommunicationType(plcmsg.CommunicationType) }}
      </el-descriptions-item>

      <!-- <el-descriptions-item label="IP">{{ plcmsg.IP }}</el-descriptions-item> -->
      <!-- 
      <el-descriptions-item label="端口">{{
        plcmsg.Port
      }}</el-descriptions-item> -->

      <el-descriptions-item
        v-for="(item, index) in networkConfig"
        :key="index"
        :label="item.name"
      >
        <span
          >{{ getConnectMsg(item, plcmsg)
          }}<i
            :style="getIconDispaly(item)"
            class="el-icon-circle-check"
            style="color: #00cb26"
          ></i
        ></span>
      </el-descriptions-item>
      <el-descriptions-item label="超时时间(ms)">{{
        plcmsg.TimeOut
      }}</el-descriptions-item>
      <el-descriptions-item label="站号" v-if="plcmsg.CommunicationType == 7">{{
        plcmsg.Site
      }}</el-descriptions-item>
      <el-descriptions-item
        label="首地址从0开始"
        v-if="plcmsg.CommunicationType == 7"
        ><el-checkbox :value="plcmsg.ZeroStart" disabled></el-checkbox
      ></el-descriptions-item>
      <el-descriptions-item
        label="浮点转换规则"
        v-if="plcmsg.CommunicationType == 7"
        >{{ plcmsg.FloatRule }}</el-descriptions-item
      >
      <el-descriptions-item
        label="字符串颠倒"
        v-if="plcmsg.CommunicationType == 7"
        ><el-checkbox :value="plcmsg.StringReverse" disabled></el-checkbox
      ></el-descriptions-item>
      <el-descriptions-item
        label="检测消息号一致"
        v-if="plcmsg.CommunicationType == 7"
        ><el-checkbox :value="plcmsg.MessageConsist" disabled></el-checkbox
      ></el-descriptions-item>
      <el-descriptions-item label="用户名">{{
        plcmsg.UserName
      }}</el-descriptions-item>
      <el-descriptions-item label="密码">{{
        plcmsg.Password
      }}</el-descriptions-item>
      <el-descriptions-item label="掉线判断阈值(ms)">{{
        plcmsg.MaxDisconnection
      }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{
        $moment(plcmsg.CreatedDate)
          .utcOffset("+08:00")
          .format("yyyy-MM-DD HH:mm:ss")
      }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script>
export default {
  props: { plcmsg: Object, networkConfig: Array, connectionId: String },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    getIconDispaly(item) {
      if (item.id == this.connectionId) {
        return "  visibility: visible";
      } else {
        return "  visibility: hidden";
      }
    },
    getConnectMsg(network, plcmsg) {
      if (!Array.isArray(plcmsg.IP)) return "";
      if (!Array.isArray(plcmsg.Port)) return "";
      let res = plcmsg.IP.find((m) => m.ID == network.id);
      let res1 = plcmsg.Port.find((m) => m.ID == network.id);
      if (res || res1) {
        return `${res.IP}:${res1.Port}`;
      } else {
        return "";
      }
    },
    getCommunicationType(type) {
      switch (type) {
        case 6:
          return "OPCUA";
        case 7:
          return "Modlbus";
        default:
          return "";
      }
    },
  },
};
</script>
<style  scoped>
/* @import url(); 引入css类 */
</style>